<template>
	<view>
		<free-nav-bar title="通讯录" :fixed="false" showright></free-nav-bar>
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" :scroll-into-view="scrollinto">
			<free-list-item v-for="item,index in list" :cover="item.cover" showright @click="addclick(index)"
				:title="item.title">
				<free-bedge slot="right" v-if="apply&&apply!==0&&index == 0" style="    position: absolute;
    
    right: 20px;
    top: -15px;">{{apply}}</free-bedge>
			</free-list-item>
			<view class="" v-for="item,index in list11" :id="'item'+index">

				<view v-if="item.list.length!==0" class="py-2 px-1 border-bottom bg-light"> <text
						class="font-md text-dark">{{item.title}}</text></view>
				<free-list-item v-for="item1 in item.list" @click="navuserbase(item1.user_id)" :cover="item1.avatar == ''?'/static/images/mail/friend.png':item1.avatar"
					:title="item1.name == ''?item1.username:item1.name">
				</free-list-item>

			</view>
		</scroll-view>
		<!-- 导航栏 -->
		<view class="position-fixed right-0 bottom-0 bg-light flex flex-column" @touchstart="touchstart"
			@touchmove="touchmove" @touchend="touchend" style="width: 60rpx;" :style="'top:'+top+'px;'">
			<view class="flex-1 flex align-center justify-center" v-for="item in list11">
				<text class="font font-sm text-muted text-secondary">{{item.title}}</text>

			</view>
		</view>
	</view>
</template>
<script>
	import auth from "@/common/mixin/auth.js"
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeBedge from "@/components/free-ui/free-bedge.vue"
	import {
		mapState
	} from "vuex"
	export default {
		mixins: [auth],
		components: {
			freeNavBar,
			freeListItem,
			freeBedge
		},
		data() {
			return {
				list: [{
						cover: require("@/static/images/mail/friend.png"),
						title: "新的朋友"
					},
					{
						cover: require("@/static/images/mail/group.png"),
						title: "群聊"
					},
					{
						cover: require("@/static/images/mail/tag.png"),
						title: "标签"
					},
				],
				list1: [{
						letter: "A",
						data: ["AAA",
							"AB",

						]
					},
					{
						letter: "B",
						data: [
							"B站程序员"
						]
					},
					{
						letter: "C",
						data: [
							"陈深",
							"陈山",
							"陈浅",
							"陈家平",
						]
					},
					{
						letter: "D",
						data: [
							"董董"
						]
					},
					{
						letter: "E",
						data: [
							"尹孝鹏"
						]
					},
					{
						letter: "F",
						data: [
							"芳芳"
						]
					},
					{
						letter: "G",
						data: [
							"郭开"
						]
					},
					{
						letter: "H",
						data: [
							"H2O"
						]
					},
					{
						letter: "I",
						data: [

						]
					},
					{
						letter: "J",
						data: [
							"杰"
						]
					},
					{
						letter: "K",
						data: [
							"K"
						]
					},

					{
						letter: "L",
						data: ["李永超", "琳琳"]
					},
					{
						letter: "M",
						data: [

						]
					},
					{
						letter: "N",
						data: []
					},
					{
						letter: "O",
						data: []
					},
					{
						letter: "P",
						data: ["朴朴"]
					},
					{
						letter: "Q",
						data: []
					},
					{
						letter: "R",
						data: []
					},
					{
						letter: "S",
						data: []
					},
					{
						letter: "T",
						data: []
					},
					{
						letter: "U",
						data: []
					},
					{
						letter: "V",
						data: []
					},
					{
						letter: "W",
						data: []
					},
					{
						letter: "X",
						data: []
					},

					{
						letter: "Y",
						data: []
					},
					{
						letter: "Z",
						data: ["赵奕航"]
					},





				],
				top: 0,
				scrollHeight: 0,
				scrollinto: ""
			}
		},
		computed: {
			itemHeight() {
				let count = this.list1.length;
				if (count < 1) {
					return 0
				}
				return this.scrollHeight / count;
			},

			...mapState({
				apply: state => state.user.apply.count,
				list11: state => state.user.mailList
			})
		},
		onShow() {
			this.$store.dispatch("getMailList")
			
			this.$store.dispatch("updateMailBadge")
		},
		onLoad() {
			let res = uni.getSystemInfoSync();
			console.log(res, "res");
			this.top = res.statusBarHeight + uni.upx2px(50);
			console.log(this.top, "yop");
			console.log(this.apply, "apply")
			this.scrollHeight = res.windowHeight - this.top
		},
		methods: {
			navuserbase(i){
				uni.navigateTo({
					url:"/pages/mail/userBase/userBase?id="+i
				})
			},
			addclick(index) {
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/mail/applyList/applyList"
					})
				}
			},
			touchstart(e) {
				console.log(e);
				let y = e.touches[0].pageY;
				// let index=Math.floor((y-this.top)/this.itemHeight);
				let index = Math.floor((y - this.top) / this.itemHeight);
				console.log(index);
				let item = this.list1[index];
				console.log(item, 'item');
				if (item) {
					this.scrollinto = 'item' + index

				}


			},
			touchmove(e) {
				console.log(e);
				let y = e.touches[0].pageY;
				// let index=Math.floor((y-this.top)/this.itemHeight);
				let index = Math.floor((y - this.top) / this.itemHeight);
				console.log(index);
				let item = this.list1[index];
				console.log(item, 'item');
				if (item) {
					this.scrollinto = 'item' + index

				}
			},
			touchend() {}

		}
	}
</script>

<style>

</style>
